@extends('layouts.layouts')
@section('title')
    <title>后台首页</title>
    <style>
        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }
        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }
        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }
        .form-horizontal .form-group {
            margin-right: 5px;
            margin-left: -1px;
        }
    </style>
@endsection
@section('content')
    <style>

        .form-horizontal .form-group {
            margin-right: 5px;
            margin-left: -1px;
        }
    </style>
    <link rel="stylesheet" href="/lib/layer/theme/default/layer.css"/>
    <script type="text/javascript" src="/lib/layer/layer.js"></script>
    <link href="/css/ueditor.css" type="text/css" rel="stylesheet">
    <div class="content">
        <div class="header">
            <ul class="breadcrumb">
                <li><a href="/train/course">组合课程列表</a>／<a href="#">添加组合课程</a> </li>

            </ul>
        </div>
        <div class="main-content">
            <ul class="nav nav-tabs nav-tabs-course">
                <li role="presentation" class="course_add active"><a href="javascript:void(0);">组合课程添加</a></li>
            </ul>
            <form class="form-horizontal" id="courseFormInfo" action="/train/course/create" method="post">
                {{csrf_field()}}
                <div class="course_class row">
                    <div class="col-md-10">
                        <br>
                        <div class="tab-content">
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">组合课程名称</label>
                                {{csrf_field()}}
                                <div class="col-sm-8">
                                    <input class="form-control" id="inputEmail3" name="title" placeholder="课程名称" type="text">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputEmail3" class="col-sm-3 control-label">组合课程描述</label>
                                <div class="col-sm-9">
                                    <textarea type="text/plain" class="form-control" placeholder="课程描述请用回车换行" id="inputEmail3" name="description" rows="6"></textarea>
                                </div>
                            </div>
                            <div class="form-group" style="">
                                <label for="inputEmail3" class="col-sm-3 control-label">组合课程价格</label>
                                <div class="col-sm-8">
                                    <input class="form-control" id="inputEmail3" name="price" placeholder="价格" value="" type="text">
                                </div>
                            </div>

                            <div class="form-group push_recommend">
                                <label for="inputPassword3" class="col-sm-3 control-label">组合课程选择</label>
                                <div class="col-sm-9">
                                    <button type="button" class="btn btn-primary btn-lg" data-page="1" onclick="selectCourse(this);">选择</button>&nbsp;&nbsp;<span style="color:blue;" id="coursesName"></span>
                                    <input type="hidden" class="form-control" value="" id="inputPassword3" name="course" autocomplete="off">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <p>
                            <button type="submit" class="btn btn-primary btn-lg col-md-offset-5" data-id="" style="width:120px;background:#286090;color:#fff;">添加</button>
                        </p>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">选择课程</h4>
                </div>
                <div class="modal-body"></div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    {{--<script src="/js/course.js"></script>--}}
    <script src="/lib/jquery.validate.js" type="text/javascript"></script>
    <script>
        function selectCourse(obj){
            var page = $(obj).attr('data-page');
            var title = $('#courseName').val();

            var data = {page:page,title:title};
            $.ajax({
                url:'/train/course/select',
                data:data,
                type:'GET',
                dataType:'json',
                success:function(res){
                    if(res.code == 0){
                        $('#myModal .modal-body').html(res.body);
                        $('#myModal').modal('show');
                    }

                }
            });
            $('#myModal').modal('show')
        }

        function chooseOk(obj){

            var course_id = $(obj).attr('data-id');
            var name = $(obj).attr('data-name');
            var courseArr = $("input[name='course']").val();

            if(courseArr == ''){
                courseArr = course_id;
            }else{
                var cArr = courseArr.split(',');
                if(cArr.indexOf(course_id) >= 0){
                    swal('课程已选');
                    return false;
                }
                courseArr = courseArr+','+course_id;

            }

            $("input[name='course']").val(courseArr);
            $('#coursesName').text(courseArr);
//            $('#myModal').modal('hide');
            $('#courseName').val('');
        }
    </script>
    <style type="text/css">
        .col-sm-2{
            width:60px;
        }
        .course_content{
            margin-right: -30px;
            margin-left: -30px;
            margin-top:5px;
        }
        .btn-success{
            background-image:none!important;
        }
    </style>
@endsection